import React from 'react'
import { useLocation } from 'react-router-dom'
import qs from "qs"

export default function Music() {
  /* 
    运用在路由传参中
    useLocation():hook方法,可以获取当前的路由地址信息
      -path:当前的路由地址
      -search:查询字符串形式的路由参数
      -state:在编程式路由导航的位置传入state参数
  */

  const uselocation=useLocation()
  const {a,b}=qs.parse(uselocation.search.split("?")[1])
  const musicList=uselocation.state
  // uselocation.state  z这个值是数组 牢记 要拿值要把每一项都遍历出来
  return (
    <div>
      <h1>音乐</h1>
      <p>好听吗{a} {b}</p>
      {
        musicList.map(item=>{
          return <li key={item.id}>{item.name}</li>
        })
      }
    
    </div>
  )
}
